
<!DOCTYPE html>
<html lang="en-us" id="extr-page">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../global/css/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="../../global/css/ztree/demo.css" type="text/css">
    <link rel="stylesheet" href="../../global/css/supplyShoping.css" type="text/css">
    <link rel="stylesheet" href="../../global/layui/css/layui.css" type="text/css">
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background:#f6f6f6;">
    <!--购物商城 左侧菜单  右侧banner 部分开始-->
    <div class="shoping">
        <div class="slider-area">
            <div class="header">
                <div class="layui-form-item">
                    <label class="layui-form-label">单行输入框</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2  col-lg-2  shoping_left">
                        <div class="hero-slider owl-carousel owl-loaded owl-drag">
                            <!--Single Slider Start-->
                            <div id="cate-toggle" class="category-menu-list">
                            </div>
                            <!--左边一级分类-->
                            <script id="demo" type="text/html">
                                {{#  layui.each(d,function(index, item){ }}
                                <ul index="{{index}}">
                                    <li class="right-menu" >
                                        <div class="title_wrap inline">
                                            <img src="{{item.banner}}" alt="">
                                            <span>{{item.name}}</span>
                                        </div>

                                    </li>
                                </ul>
                                {{#  }); }}
                            </script>
                        </div>
                        <!--二级分类 三级分类框 -->
                        <ul class="cat-mega-menu" style="" id="child_one">
                        </ul>
                        <!-- 二级分类 三级分类-->
                        <script  id="demo1" type="text/html">
                            {{#  layui.each(d,function(index,item){ }}
                            <li class="right-menu cat-mega-title">
                                <div class="right-menu_title">{{item.name}}</div>
                                <ul style="">
                                    <li class="right-menu_item">
                                        {{#  layui.each(item.child,function(index,child_item){ }}
                                        <a href="#" class="right-menu_child">{{child_item.name}}</a>
                                        {{#  }); }}
                                    </li>
                                </ul>
                            </li>
                            {{#  }); }}
                        </script>
                    </div>
                    <div class="col-md-8 col-lg-6 shoping_center" id="vvv">
                        <div class="layui-carousel" id="test10">
                            <div carousel-item="" id="banner_img">
                                <script id="banner1" type="text/html">
                                    {{#  layui.each(d,function(index,item){ }}
                                    <div><img src="{{item.bannerUrl}}" alt=""></div>
                                    {{#  }); }}
                                </script>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 col-lg-3 shoping_right">
                        <div class="shoping_rightItem">
                            <img src="../../global/img/supplyImg/banner-right-1.png" alt="">
                        </div>
                        <div class="shoping_rightItem">
                            <img src="../../global/img/supplyImg/banner-right-2.png" alt="">
                        </div>
                        <div class="shoping_rightItem">
                            <img src="../../global/img/supplyImg/banner-right-3.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--购物商城 左侧菜单  右侧banner 部分结束-->
    <!--下放的列表页面展示-->

    <div class="shopingList" id="shopingList">
        <script id="shop_wrap" type="text/html">
            {{#  layui.each(d,function(index,item){ }}
            <div class="shopingListItem">
                <div class="item_top">
                    <img src="{{item.goodsPic}}" alt="">
                </div>
                <div class="item_center">
                    <p class="item_p1">
                        {{item.goodsName}}官方冻干粉冻干粉冻干粉冻干粉冻干粉冻干粉的
                    </p>
                </div>
                <div class="item_bottom">
                    <p class="item_p2">￥{{item.presentPrice}}</p>
                </div>
            </div>
            {{#  }); }}
        </script>
    </div>
    <!--下面的列表页面展示结束-->
</div>

<script type="text/javascript" src="../../global/js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../global/js/jq.js"></script>
<script type="text/javascript" src="../../global/js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="../../global/js/common.js"></script>
<script type="text/javascript" src="../../global/layui/layui.js"></script>
<script type="text/javascript" src="../../global/js/my/roles/role.js"></script>
<script type="text/javascript" src="../../global/js/ajaxfileupload.js"></script>
<script type="text/javascript">

    $(".shopingListItem").click(function () {
        var id = 5;
        window.location.href = './touchList.html';

    })
    window.onload=function(){
        layui.use(['layer','carousel','form'], function(){
            var layer = layui.layer
                ,form = layui.form
                ,carousel = layui.carousel
            carousel.render({
                elem: '#test10'
                ,width: '100%'
                ,height: '408px'
                ,interval: 3000,
                arrow:'none',
                indicator:'none'
            });

        });
        //菜单树状展示
        var left_data=''
        layui.use('laytpl',function(){
            var laytpl=layui.laytpl;
            layer.load(2);
            $.ajax({
                url: "/clyjScmGoods/getGoodsClass",
                dataType: 'json',
                type: 'post',
                async: false,
                success: function (data) {
                    console.log(data);
                    left_data=data;
                    var getTpl=document.getElementById('demo').innerHTML;
                    var view = document.getElementById('cate-toggle');
                    laytpl(getTpl).render(data, function(html){
                        view.innerHTML = html;
                    });
                    layer.closeAll('loading');
                }
            })
            //banner图
            $.ajax({
                url: "/clyjScmGoods/getBanner",
                dataType: 'json',
                type: 'post',
                async: false,
                success: function (data) {
                    console.log(data);
                    var getTpl=document.getElementById('banner1').innerHTML;
                    var view = document.getElementById('banner_img');
                    laytpl(getTpl).render(data, function(html){
                        view.innerHTML = html;
                    });
                }
            })
            //推荐商品
            $.ajax({
                url: "/clyjScmGoods/getScmGoods",
                dataType: 'json',
                type: 'post',
                async: false,
                data:{goodsStatus:'1',sortType:"asc"},
                success: function (data) {
                    console.log(data);
                    var getTpl=document.getElementById('shop_wrap').innerHTML;
                    var view = document.getElementById('shopingList');
                    laytpl(getTpl).render(data, function(html){
                        view.innerHTML = html;
                    });
                }
            })
            //鼠标滑过一级分类  显示二级分类
            $(".category-menu-list  ul").mouseover(function(){
                var index=$(this).attr("index");
                console.log(index)
                console.log(left_data)
                var getTpl=document.getElementById('demo1').innerHTML;
                var view = document.getElementById('child_one');
                laytpl(getTpl).render(left_data[index].child, function(html){
                    view.innerHTML = html;
                });
                $(".cat-mega-menu").css("opacity","1");
                $(this).addClass("active1");
                $(".category-menu-list img").show();
                $(".category-menu-list ul").eq(index).children("li").children("div").children("img").hide();

            })
            // 鼠标移走  隐藏二级 三级分类
            $(".category-menu-list  ul").mouseout(function() {
                $(".cat-mega-menu").css("opacity","0");
                $(this).removeClass("active1");
                $(".category-menu-list img").show();
            })

        });

    }



</script>

</body>
</html>